<template>
  <div class="friend-item" :class="{ selected: isSelected }">
    <div class="avatar-section">
      <el-avatar
        :size="40"
        :src="friend.avatar"
        :alt="friend.nickname"
        class="friend-avatar"
      >
        <span>{{ getAvatarText(friend.nickname) }}</span>
      </el-avatar>
      
      <!-- 在线状态指示器 -->
      <div
        class="status-indicator"
        :class="statusClass"
        :title="statusText"
      />
    </div>
    
    <div class="info-section">
      <div class="name-row">
        <span class="friend-name">{{ friend.nickname }}</span>
        <span v-if="lastActiveTime" class="last-active">{{ lastActiveTime }}</span>
      </div>
      
      <div class="status-row">
        <span class="status-text" :class="statusClass">{{ statusText }}</span>
        
        <!-- 未读消息提示 -->
        <el-badge
          v-if="unreadCount > 0"
          :value="unreadCount > 99 ? '99+' : unreadCount"
          :max="99"
          class="unread-badge"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Friend } from '@/types'
import { formatRelativeTime } from '@/utils/format'

// Props
interface Props {
  friend: Friend
  unreadCount?: number
  isSelected?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  unreadCount: 0,
  isSelected: false
})

// Computed properties
const statusClass = computed(() => {
  switch (props.friend.status) {
    case 'online':
      return 'status-online'
    case 'away':
      return 'status-away'
    case 'offline':
    default:
      return 'status-offline'
  }
})

const statusText = computed(() => {
  switch (props.friend.status) {
    case 'online':
      return '在线'
    case 'away':
      return '离开'
    case 'offline':
    default:
      return '离线'
  }
})

const lastActiveTime = computed(() => {
  if (props.friend.status === 'online') {
    return ''
  }
  
  if (props.friend.lastActiveTime) {
    return formatRelativeTime(props.friend.lastActiveTime)
  }
  
  return ''
})

// Methods
const getAvatarText = (nickname: string): string => {
  if (!nickname) return '?'
  
  // 如果是中文，取最后一个字符
  if (/[\u4e00-\u9fa5]/.test(nickname)) {
    return nickname.slice(-1)
  }
  
  // 如果是英文，取首字母
  return nickname.charAt(0).toUpperCase()
}
</script>

<style scoped lang="scss">
.friend-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  transition: all 0.2s ease;
  position: relative;
  
  &.selected {
    background: #ecf5ff;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #409eff;
    }
  }
  
  .avatar-section {
    position: relative;
    margin-right: 12px;
    
    .friend-avatar {
      background: #c0c4cc;
      color: #fff;
      font-weight: 500;
    }
    
    .status-indicator {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #fff;
      
      &.status-online {
        background: #67c23a;
      }
      
      &.status-away {
        background: #e6a23c;
      }
      
      &.status-offline {
        background: #909399;
      }
    }
  }
  
  .info-section {
    flex: 1;
    min-width: 0;
    
    .name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      
      .friend-name {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }
      
      .last-active {
        font-size: 11px;
        color: #909399;
        margin-left: 8px;
        white-space: nowrap;
      }
    }
    
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .status-text {
        font-size: 12px;
        
        &.status-online {
          color: #67c23a;
        }
        
        &.status-away {
          color: #e6a23c;
        }
        
        &.status-offline {
          color: #909399;
        }
      }
      
      .unread-badge {
        :deep(.el-badge__content) {
          font-size: 10px;
          padding: 0 5px;
          height: 16px;
          line-height: 16px;
          min-width: 16px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .friend-item {
    padding: 10px 12px;
    
    .avatar-section {
      margin-right: 10px;
      
      .friend-avatar {
        width: 36px;
        height: 36px;
      }
      
      .status-indicator {
        width: 8px;
        height: 8px;
        bottom: 1px;
        right: 1px;
      }
    }
    
    .info-section {
      .name-row {
        .friend-name {
          font-size: 13px;
        }
        
        .last-active {
          font-size: 10px;
        }
      }
      
      .status-row {
        .status-text {
          font-size: 11px;
        }
      }
    }
  }
}
</style>